<template>
  <div class="demo-table-expand">
    <el-header>所有餐厅列表</el-header>
    <div>
      <el-button @click="add()">
        新增
      </el-button>
    </div>
    <el-table :data="restaurants" style="width: 100%">
      <el-table-column prop="createdAt" label="日期" width="200"/>
      <el-table-column prop="name" label="名字" width="200"/>
      <el-table-column prop="address" label="地址" width="200"/>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="edit(scope.$index, scope.row)">
            修改
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
          <el-button size="small" type="primary" @click="goToDetail(scope.row.restaurantId)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>


</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router';

const router = useRouter();
const restaurants = ref([
  {
    "restaurantId": 1,
    "name": "第一家餐馆",
    "address": "安师大东门",
    "rating": 3,
    "createdAt": "2024-09-10",
  },
  {
    "restaurantId": 2,
    "name": "炒鸡店——一号店",
    "address": "安师大南门",
    "rating": 4,
    "createdAt": "2024-09-10",
  },
  {
    "restaurantId": 3,
    "name": "炒鸡店——二号店",
    "address": "安师大东门",
    "rating": 5,
    "createdAt": "2024-09-10",
  },
])

function add() {
  restaurants.value.push({
    "restaurantId": 5,
    "name": "奶茶二号店",
    "address": "安师大老校区",
    "rating": 5,
    "createdAt": "2024-09-12"
  })
}

function edit(index: number, row: any) {
  console.log(index, row)
  //将此行数据修改名称为aaa，地址为bbb
  row.name = "aaa"
  row.address = "bbb"
  console.log(restaurants.value)
}

function handleDelete(index: number, row: any) {
  console.log(index, row)
  //删除此行数据
  restaurants.value.splice(index, 1)
  console.log(restaurants.value)
}

function goToDetail(restaurantId: number) {
  router.push({name: 'RestaurantDetail', params: {id: restaurantId.toString()}});
}
</script>